<template>
  <div id="blog-List">
    <div class="empty" v-show="isEmpty">未找到相关文章</div>
    <div class="blogContainer" v-for="blog in blogs">
      <h2 @click="readMore(blog.id)">{{blog.title}}</h2>
      <div v-show="isUser">
        <el-button type="primary" @click="editClick(blog.id)">编辑</el-button>
        <el-button type="danger" @click="deleteClick(blog.id)">删除</el-button>
      </div>
      <p>
        <span>创建于：{{blog.created}}</span>
        <span v-show="blog.updated" class="other">更新于：{{blog.updated}}</span>
        <span class="other">分类为：{{blog.categories}}</span>
      </p>
      <p class="desc">{{blog.description}}</p>
      <el-button @click="readMore(blog.id)">阅读全文</el-button>
    </div>
    <pagination ref="page"v-show="!isEmpty" :pageSize="limit" :totalSize="totalSize" @pageClick="changePage"/>
<!--    <button style="margin-top: 300px; z-index: 50" @click="testClick()">测试</button>-->
  </div>
</template>

<script>
import {getBlogByPage, getBlogByTitle, getBlogSize, deleteBlog} from "@/network/blogRequest";
import {deleteFile} from "@/network/fileRequest";

import Pagination from "@/components/blog/blogs/Pagination";

// import {test} from "@/network/fileRequest";

export default {
  name: "BlogList",
  props: {
    limit: {
      type: Number,
      default() {
        return 5;
      }
    }
  },
  data() {
    return {
      blogs: [],
      currentPage: 1,
      totalSize: 0
    }
  },
  components: {
    Pagination
  },
  methods: {
    //网络请求
    getBlogByPage(currentPage, limit) {
      getBlogByPage(currentPage, limit).then(res => {
        this.blogs = res.data;
      })
    },
    getBlogByTitle(title) {
      if(title !== "") {
        getBlogByTitle(title).then(res => {
          this.blogs = res.data;
          this.$emit("changeLimit", res.data.length);
          this.totalSize = res.data.length;
          this.$message.success("共" + res.data.length + "条记录！")
        })
      }else {
        //用Promise实现异步操作
        new Promise(resolve => {
          this.$emit("changeLimit", 0);
          resolve();
        }).then(() => {
          this.getBlogSize();
        }).then(() => {
          this.getBlogByPage(this.currentPage, this.limit);
        })
      }
    },
    getBlogSize() {
      getBlogSize().then(res => {
        this.totalSize = res.data;
      })
    },

    /**
     * 按钮点击操作
     */
    readMore(id) {
      if(this.isUser) {
        this.$emit("readMore", id);
      }else {
        this.$router.push("/blog/" + id)
      }
    },
    editClick(id) {
      this.$router.push("/user/blog/" + id + "/edit");
    },
    deleteClick(id) {
      this.$confirm('确认删除？').then(_ => {
        deleteFile(JSON.stringify(id), JSON.stringify(null));
        deleteBlog(id).then(res => {
          this.getBlogByPage(this.currentPage, this.limit);
          this.getBlogSize();
        });
      }).catch(_ =>{});
    },
    changePage(currentPage) {
      this.currentPage = currentPage;
      this.getBlogByPage(currentPage, this.limit);
    },
    // testClick() {
    //   // var str = JSON.stringify(this.testData);
    //   // console.log(str)
    //   // test(str)
    //   test(this.testData)
    // }
  },
  computed: {
    isUser() {
      const path = this.$route.path;
      if(path === "/user/blog/edit") {
        return true;
      }
      return false;
    },
    isEmpty() {
      if(this.blogs.length === 0 ) {
        return true;
      }
      return false;
    }
  },
  created() {
    this.getBlogSize();
    this.getBlogByPage(this.currentPage, this.limit);
  },
  mounted() {
    //接收事件总线
    this.$bus.$on('search', title => {
      this.getBlogByTitle(title);
    })
  }
}
</script>

<style scoped>
  #blog-List {
    text-align: center;
  }

  #blog-List .empty {
    position: absolute;
    width: 300px;
    height: 300px;
    top: 50%;
    left: 50%;
    margin-top: -120px;
    margin-left: -150px;
    line-height: 300px;
    color: red;
    font-size: 20px;
    background-color: rgba(255, 255, 255, 0.9);
    border: 1px solid #d5d5d5;
  }

  #blog-List .blogContainer {
    margin-bottom: 10px;
    padding: 40px;
    text-align: center;
    background-color: rgba(255, 255, 255, .9);
    border-left: 1px solid #d5d5d5;
    box-shadow: 5px 5px 5px 0 rgba(0, 0, 0, 0.3);
  }

  #blog-List .blogContainer h2{
    font-size: 1.5em;
    margin-bottom: 15px;
  }

  #blog-List .blogContainer h2:hover {
    cursor: pointer;
    text-decoration: underline;
  }

  #blog-List .blogContainer span {
    font-size: 10px;
    color: #999999;
    padding: 0 10px;
  }

  #blog-List .blogContainer .other {
    border-left: 1px solid #999999;
  }

  #blog-List .blogContainer .desc {
    margin: 60px 0 40px 0;
    text-align: left;
  }
</style>